<template>
  <view class="personalHome flex flex-column align-center">
    <view class="personalHome_background flex flex-column align-center justify-center" @click.stop="photoPath"
          v-if="!!personalDetails.album && personalDetails.album.length <= 0">
      <image class="family_header_image" mode="widthFix" v-if="options.is_share != 1"
             :src="`${IMG_URL}/index/uploadPhoto.png`"></image>
      <view class="family_header_desc flex flex-column align-center" v-if="options.is_share != 1">
        <!--        <text class="family_header_desc_text">还未上传全家福</text>-->
        <text class="family_header_desc_littleText">点击上传{{ personalDetails.remark || personalDetails.username
          }}的照片
        </text>
      </view>
    </view>
    <view class="personalHome_background flex flex-column align-center justify-center" @click.stop="photoPath"
          v-else>
      <swiper class="wh_750 hW_508" style="border-radius: 20rpx;overflow: hidden" :interval="2000"
              @click="photoPath">
        <swiper-item v-for="(item,index) in personalDetails.album" :key="index">
          <image :src="item.image" mode="aspectFill"
                 style="width: 100%;will-change: transform;height: 100%;"
                 @click="photoPath()"
          ></image>
        </swiper-item>
      </swiper>
    </view>
    <s-header-title ref="headerTitle" :isDisplayBack="options.is_share != 1" :isShowHome="options.is_share == 1" is-fixed title="个人详情" title-color="transparent"
                  @getPageHeight="getPageHeight" z-index="10"></s-header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view :style="{height: `calc(508rpx - ${headerHeight}px)`}"></view>
    <view class="personalHome_secondaryBackground z_1 flex flex-column align-center">
      <!-- 个人资料 -->
      <view class="personalHome_infoCard flex align-center justify-center" style="position: relative">
        <view class="personalHome_infoCard_all flex align-center justify-between">
          <view class="personalHome_infoCard_all_left flex align-center" @click.stop="peopleDataPath()">
            <view class="personalHome_infoCard_all_left_warp">
              <image-avater :src="`${personalDetails.avatar}`" :width="128" :height="128"></image-avater>
              <view class="personalHome_infoCard_all_left_info_name_edit flex align-center justify-center mt_14">
                <image v-if="options.is_share != 1" :src="`${IMG_URL}/index/bianjiziliao.gif`" mode="widthFix"></image>
              </view>
            </view>
            <view class="personalHome_infoCard_all_left_info ml_30">
              <view class="personalHome_infoCard_all_left_info_name flex align-center"
                    v-if="!!personalDetails.username || !!personalDetails.remark">
                <text class="personalHome_infoCard_all_left_info_name_text">
                  {{ personalDetails.username || personalDetails.remark }}
                </text>
                <view class="personalHome_infoCard_all_left_info_name_remark flex align-center justify-center ml_8"
                      v-if="!!personalDetails.remark && !!personalDetails.username">
                  <text class="personalHome_infoCard_all_left_info_name_remark_text">{{ personalDetails.remark }}</text>
                </view>
              </view>
              <view class="flex align-center mt_12"
                    style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #787878;">
                <image
                  :src="personalDetails.gender == 1 ? `${IMG_URL}/index/user_men.png`:`${IMG_URL}/index/user_women.png`"
                  :style="{width: '21rpx', height: '23rpx'}"></image>
                <view class="ml_9" v-if="!!personalDetails.full_year && !!personalDetails.full_year">
                  {{ !!personalDetails.full_year ? `${personalDetails.full_year}` : '' }}
                </view>
                <view class="ml_22" v-if="!!personalDetails.shuxing && !!personalDetails.shuxing.animal">
                  {{ !!personalDetails.shuxing.animal ? `${personalDetails.shuxing.animal}` : '' }}
                </view>
                <view class="ml_22" v-if="!!personalDetails.shuxing && !!personalDetails.shuxing.constellation">
                  {{ !!personalDetails.shuxing.constellation ? `${personalDetails.shuxing.constellation}` : '' }}
                </view>
              </view>
              <view class="personalHome_infoCard_all_left_info_signature mt_6 flex align-center"
                    v-if="!!personalDetails.bio">
                <image :src="`${IMG_URL}/index/jiating_qinming_icon.png`" style="width: 21rpx;height: 24rpx;"></image>
                <text class="personalHome_infoCard_all_left_info_signature_text ml_9">{{
                    personalDetails.bio
                  }}
                </text>
              </view>
              <view class="personalHome_infoCard_all_left_info_signature mt_6  flex align-center" v-else>
                <image :src="`${IMG_URL}/index/jiating_qinming_icon.png`" style="width: 21rpx;height: 24rpx;"></image>
                <text class="personalHome_infoCard_all_left_info_signature_text ml_9">拾亲 共创美好生活～</text>
              </view>
            </view>
          </view>
          <view class="flex align-center" @click.stop="cherishTheMemoryOf()" v-if="personalDetails.is_alive == 2"
                style="position: absolute;border-radius: 0rpx 20rpx 0rpx 20rpx;top: 0;right: 0;background: #FAE6BC;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 30rpx;color: #A7752A;padding: 6rpx 12rpx;">
            <image :src="`${IMG_URL}/index/gongdezhi.png`" style="width: 37rpx;height: 27rpx;" class="mr-10"></image>
            {{ '缅怀' }}
          </view>
        </view>
      </view>
      <!-- 用心记 -->
      <view class="wh_702 hW_110 mt_20 bg_FFFFFF flex align-center justify-between"
            style="border-radius: 8rpx;"
            @click.stop="sheep.$router.go('/pages/familyPage/learnByHeart',{family_id:options.family_id,member_id:options.id})"
      >
        <view class="flex align-center wh_90 justify-center" style="border-right: 2rpx solid #E2E2E2">
          <image class="wh_50 hW_50" :src="`${IMG_URL}/index/learnByHeart.png`"></image>
          <!--            <view class="fs_14 color_FF7905 color_FF7905 wh_14 ml_5" style="line-height: 20rpx">用心记</view>-->
        </view>
        <view class="flex flex-sub align-center hW_90" v-if="family_remember.length> 0">
          <swiper class="flex-sub hW_90"
                  vertical
                  autoplay
                  circular
          >
            <swiper-item v-for="(item,index) in family_remember"
                         :key="index"
            >
              <view class="flex align-center hW_90">
                <s-avatar class="ml_11"
                          :src="item.member_avatar.indexOf('http') != -1 ?item.member_avatar : `${nc_image}${item.member_avatar}`"
                          :width="46"
                          :height="46"
                ></s-avatar>
                <view class="flex flex-column flex-sub ml_5">
                  <view class="fs_22 fw_500 color_696969">{{ item.title }}:</view>
                  <view class="mt_4 fs_26 color_4E4E4E fw_500"
                        style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 520rpx"
                  >
                    {{ item.content }}
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!-- 家庭纪念日 -->
      <view class="personalHome_allContent flex flex-column align-center mt_18">
        <list-header :title="`生日纪念日`" :showIcon="options.is_share != 1" width="658rpx"
                     @listHeaderAllClick="anniversariesListPath">
          <template #button>
            <view class="listAllButton flex align-center justify-center" @click.stop="jumpAddFamilyAnniversary(1)">
              <view class="name">添加</view>
              <image class="ml_10" :src="`${IMG_URL}/index/list_family_icon_add.png`"></image>
            </view>
          </template>
        </list-header>
        <scroll-view class="family_familyAnniversary z-1" :scroll-x="true">
          <view class="family_familyAnniversary_all flex align-center">
            <card-hints v-for="(item,index) in personalDetails.memorial_day" :key="index" :info="item"
                        :index="index" :options="options"
                        :length="personalDetails.memorial_day.length"
                        @anniversariesListPath="goBirthday" @openLogin="openLogin"></card-hints>
          </view>
        </scroll-view>
      </view>
      <!-- 家庭圈 -->
      <view class="personalHome_allContent flex flex-column align-center mt_18">
        <list-header :title="`家庭圈`" :showIcon="options.is_share != 1" width="658rpx"
                     @listHeaderAllClick="goFamilyCircleDetails">
          <template #button>
            <view class="listAllButton flex align-center justify-center" @click.stop="goPath">
              <view class="name">发布</view>
              <image class="ml_10" :src="`${IMG_URL}/index/list_family_icon_publish.png`"></image>
            </view>
          </template>
        </list-header>
        <family-circle v-for="(item,index) in personalDetails.family_circle" :key="index" :info="item"
                       :detailFlag="true" :show-margin="index != 0"
                       :index="index" class="z-1" :is-show-reply="false" :isShowDel="false"
                       :border="personalDetails.family_circle.length - 1 != index" :options="options"
                       @likeInterface="familyCircleLike" @openCreateUser="openCreateUser"
                       @openLogin="openLogin" @shareAppMessage="shareAppMessage"></family-circle>
      </view>
      <view class="family_publish z_1 flex align-center justify-center mt_23" @click.stop="goPath">
        <text class="family_publish_text">发布家庭圈</text>
      </view>
      <view style="height: 150rpx"></view>
    </view>

  </view>
</template>

<script>
  import HeaderTitle from '@/pages/familyPage/components/headerTitle.vue';
  import sheep from '@/sheep';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import ListHeader from '@/pages/familyPage/components/listHeader.vue';
  import CardHints from '@/pages/familyPage/components/cardHints.vue';
  import FamilyCircle from '@/pages/familyPage/components/familyCircle.vue';

  export default {
    components: { FamilyCircle, CardHints, ListHeader, ImageAvater, HeaderTitle },
    data() {
      return {
        // 头部高度
        headerHeight: 0,
        // 个人纪念日列表
        propelAnniversaryList: [],
        // 个人圈列表
        propelCircleList: [],
        familyAnniversaryType: [
          {
            name: '添加生日',
          },
          {
            name: '添加纪念日',
          },
        ],
        selectFamilyAnniversaryType: -1,

        personalDetails: {},

        // 浮窗按钮的配置
        bottomFlag: false,
        systemInfo: {},
        // 是否第一次加载
        is_loading: true,
        personalInfo: {
          page: 1,
          pagesize: 10,
          total: 0,
        },
        circlePage: 1,
        circlePagesize: 10,
        circleTotal: 0,
        family_remember: [],
      };
    },
    props: {
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    computed: {
      sheep() {
        return sheep;
      },
      // family_id() {
      //   return this.$store.state.shiqinStore.selectedId;
      // },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    methods: {
      async getLearnSwiper() {
        const { data } = await sheep.$api.family.getFamilyRememberListByFamilyId({
          member_id: this.options.id,
          num: 10,
        });
        this.family_remember = data;
      },
      // 获取家庭成员详情
      async getPersonalDetails() {
        let { data } = await sheep.$api.family.getFamilyMemberDetail({
          member_id: this.options.id,
        });
        this.personalDetails = data;
      },
      // 获取个人相册
      async getPersonalAlbum() {
        let { data } = await sheep.$api.family.getPersonCover({
          member_id: this.options.id,
        });
        this.personalDetails.album = data;
      },
      // 获取个人生日
      async getPersonalAnniversary() {
        let { data } = await sheep.$api.family.getFamilyMemoryDay({
          member_id: this.options.id,
          family_id: this.options.family_id,
          page: 1,
          pagesize: 10,
        });
        console.log(data);
        this.personalDetails.memorial_day = data.memorydays;
      },
      // 获取家庭圈
      async getPersonalCircle() {
        let { data } = await sheep.$api.family.getMemberCircle({
          member_id: this.options.id,
          family_id: this.options.family_id,
          page: this.circlePage,
          pagesize: this.circlePagesize,
        });
        this.circleTotal = data.count;
        this.personalDetails.family_circle = data.list;
      },
      async cherishTheMemoryOf() {
        if (this.options.is_share == 1) {
          return;
        }
        let { data } = await sheep.$api.genealogy.aliveDetail({
          type: 1,
          id: this.personalDetails.id,
        });
        console.log(data);
        uni.setStorageSync('aliveDetail', JSON.stringify(data));
        sheep.$router.go('/pages/genealogy/ct_detail', {
          sex: this.personalDetails.sex,
          family_id: this.options.family_id,
        });
      },
      openCreateUser(data) {
        this.$refs.secondPopup.openPopup({
          background: `${this.IMG_URL}personalInformation.png`,
          memberInfo: data,
        });
      },
      async goPath() {
        const { code, msg } = await sheep.$api.family.checkAuth({
          family_id: this.options.family_id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg)
          return;
        }
        sheep.$router.go('/pages/family/familyCircleRelease', {
          family_id: this.options.family_id,
          member_id: this.personalDetails.id,
          name: this.personalDetails.remark || this.personalDetails.username,
          is_flag: 1,
        });
      },
      getBottomButton() {
        const query = uni.createSelectorQuery().in(this);
        query.select('.personalHome').boundingClientRect(data => {
          const rpx = this.systemInfo.windowWidth / 750;
          this.bottomFlag = (data.top + data.height) > this.systemInfo.windowHeight - (200 * rpx);
        }).exec();
      },
      getPageHeight(number) {
        this.headerHeight = number;
      },
      peopleDataPath() {
        if (this.options.is_share == 1) {
          return;
        }
        sheep.$router.go('/pages/familyPage/personalData', {
          member_id: this.personalDetails.id,
          name: this.personalDetails.username,
          family_id: this.options.family_id,
        });
      },
      photoPath() {
        if (this.options.is_share == 1) {
          return;
        }
        sheep.$router.go('/pages/family/photoAlbum', {
          is_flag: 1,
          member_id: this.personalDetails.id,
          name: this.personalDetails.username || this.personalDetails.remark,
          is_share: this.options.is_share != 1 ? 0 : 1,
          family_id: this.options.family_id,
        });
      },
      // 添加家庭纪念日
      addFamilyAnniversary() {
        this.$refs.familyAnniversaryPopUp.openPopup({
          title: '请选择',
          maskClick: false,
          isShowConfirm: false,
        });
      },
      // 跳转纪念日列表
      anniversariesListPath() {
        if (this.options.is_share == 1) {
          return;
        }
        sheep.$router.go('/pages/familyPage/anniversariesList', {
          member_id: this.personalDetails.id,
          family_id: this.options.family_id,
        });
      },
      // 跳转家庭全详情
      goFamilyCircleDetails() {
        if (this.options.is_share == 1) {
          return;
        }
        sheep.$router.go('/pages/family/familyCirclePage', {
          name: this.personalDetails.username || this.personalDetails.remark,
          member_id: this.personalDetails.id || 0,
          family_id: this.options.family_id,
        });
      },
      // 家庭圈点赞
      likeInterface(index) {
        if (this.propelCircleList[index].is_click == 0) {
          this.$set(this.propelCircleList[index], 'is_click', 0);
          this.$set(this.propelCircleList[index], 'click_num', this.propelCircleList[index].click_num + 1);
          this.$set(this.propelCircleList[index], 'today_click_num', this.propelCircleList[index].today_click_num + 1);
        } else {
          this.$set(this.propelCircleList[index], 'is_click', 0);
          this.$set(this.propelCircleList[index], 'click_num', this.propelCircleList[index].click_num + 1);
          this.$set(this.propelCircleList[index], 'today_click_num', this.propelCircleList[index].today_click_num + 1);
        }
      },
      familyCircleBublish() {
        if (this.options.is_share == 1) {
          return;
        }
        this.$nav.navigateTo('/pages/familyCircleDetails/familyCircleRelease', {
          is_flag: 1,
          name: this.personalDetails.username || this.personalDetails.remark,
        });
      },
      async jumpAddFamilyAnniversary(index) {
        if (this.options.is_share == 1) {
          return;
        }
        const { code, msg } = await sheep.$api.family.checkAuth({
          family_id: this.options.family_id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg)
          return;
        }
        this.selectFamilyAnniversaryType = index;
        setTimeout(() => {
          switch (index) {
            case 0:
              this.$nav.navigateTo('/pages/familyAnniversary/birthday', { is_flag: 1 });
              this.$refs.familyAnniversaryPopUp.closePopup();
              this.selectFamilyAnniversaryType = -1;
              return;
            case 1:
              sheep.$router.go('/pages/family/anniversary', {
                member_id: this.personalDetails.id,
                remark: this.personalDetails.remark || this.personalDetails.username,
                family_id: this.options.family_id,
              });
              return;
          }
        }, 500);
      },
      // 获取个人详情
      getPersonalInfo(id) {
        getMemberInfo({
          id,
        }).then(res => {
          this.personalDetails = res.data.list;
          // if (this.is_loading) {
          this.page = 1;
          this.propelCircleList = [];
          this.getPersonalCircles();
          // }
        });
      },
      // 获取个人圈
      async getPersonalCircles() {
        let { data } = await getMomentsList({
          type: 2,
          member_id: this.personalDetails.id,
          page: this.personalInfo.page,
          pagesize: this.personalInfo.pagesize,
          family_id: this.family_id,
        });
        data.list.data.forEach(item => {
          this.propelCircleList.push(item);
        });
        this.personalInfo.total = data.list.total;
        this.is_loading = false;
      },
      goBirthday(status = 1, info) {
        if (this.options.is_share == 1) {
          return;
        }
        sheep.$router.go('/pages/family/dayDetail', {
          type: status,
          record_id: info.id,
          family_id: this.options.family_id,
        });
      },
      shareAppMessage(obj) {
        this.wxShare.title = obj.title || '重拾亲情，孝道传承...';
        this.wxShare.path = obj.path || '';
        this.wxShare.imageUrl = obj.imageUrl || '';
        setTimeout(() => {
          this.wxShare.title = '重拾亲情，孝道传承...';
          this.wxShare.path = '/pages/family/index';
          this.wxShare.imageUrl = '';
        }, 1000);
      },
      familyCircleLike(index) {
        this.$set(this.personalDetails.family_circle[index], 'like_count', this.personalDetails.family_circle[index].like_count + 1);
      },
    },
  };
</script>

<style lang="scss">
  .personalHome {
    width: 750rpx;
    min-height: 100vh;
    background: #F5F5F5;
    margin: 0 auto;

    .personalHome_background {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 750rpx;
      height: 508rpx;
      background: url($uni-bg-url-sq + "/index/001.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .family_header_image {
        width: 83rpx;
        height: 83rpx;
      }

      .family_header_desc {
        .family_header_desc_text {
          font-family: Heiti SC, Heiti SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
        }

        .family_header_desc_littleText {
          font-family: Heiti SC, Heiti SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
        }
      }
    }

    .personalHome_secondaryBackground {
      width: 750rpx;
      min-height: calc(100vh - 508rpx);
      background: #F5F5F5;

      .personalHome_infoCard {
        margin-top: -52rpx;
        width: 702rpx;
        height: 190rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .personalHome_infoCard_all {
          margin: 0 25rpx;
          width: 652rpx;

          .personalHome_infoCard_all_left {
            .personalHome_infoCard_all_left_warp {
              position: relative;

              .personalHome_infoCard_all_left_info_name_edit {
                position: absolute;
                left: 50%;
                top: 90rpx;
                transform: translateX(-50%);
                width: 120rpx;
                //height: 50rpx;
                //background: #FF7950;
                border-radius: 25rpx 25rpx 25rpx 25rpx;

                //.personalHome_infoCard_all_left_info_name_edit_text {
                //  font-family: PingFang SC, PingFang SC;
                //  font-weight: 500;
                //  font-size: 18rpx;
                //  color: #FFFFFF;
                //}
                image {
                  width: 120rpx;
                  //height: 50rpx;
                }
              }
            }

            .personalHome_infoCard_all_left_info {
              .personalHome_infoCard_all_left_info_name {
                .personalHome_infoCard_all_left_info_name_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 36rpx;
                  color: #000000;
                }

                .personalHome_infoCard_all_left_info_name_remark {
                  padding: 0 10rpx;
                  height: 30rpx;
                  background: #FF7950;
                  border-radius: 15rpx 15rpx 15rpx 15rpx;

                  .personalHome_infoCard_all_left_info_name_remark_text {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #FFFFFF;
                  }
                }
              }

              .personalHome_infoCard_all_left_info_signature {
                .personalHome_infoCard_all_left_info_signature_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 26rpx;
                  color: #5C5C5C;
                }
              }
            }
          }

          .personalHome_infoCard_all_right {
            .personalHome_infoCard_all_right_image {
              width: 117rpx;
              height: 117rpx;
            }
          }
        }
      }

      .personalHome_allContent {
        width: 702rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        overflow: hidden;
        padding: 0 0 15rpx 0;

        .family_familyAnniversary {
          width: 658rpx;
          overflow: hidden;

          .family_familyAnniversary_all {
            padding: 8rpx 0 10rpx 0;
          }
        }
      }


      .family_publish {
        width: 362rpx;
        height: 80rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .family_publish_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
        }
      }
    }

    .familyAnniversaryPopUp {
      width: 496rpx;

      .familyAnniversaryPopUp_list {
        margin: 52rpx 0;

        .familyAnniversaryPopUp_list_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 34rpx;
          color: #000000;
        }

        .familyAnniversaryPopUp_list_line {
          width: 30rpx;
          height: 30rpx;
          border-radius: 36rpx 36rpx 36rpx 36rpx;
          border: 2rpx solid #2F2F2F;
        }

        .familyAnniversaryPopUp_list_selectLine {
          width: 26rpx;
          height: 26rpx;
          border-radius: 13rpx 13rpx 13rpx 13rpx;
          border: 6rpx solid #FF4206;
        }
      }
    }
  }

  .listAllButton {
    width: 111rpx;
    height: 40rpx;
    border-radius: 21rpx 21rpx 21rpx 21rpx;
    border: 2rpx solid #FF4206;

    .name {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 24rpx;
      color: #FF4206;
    }

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .family_publish {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    .family_publish_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
</style>
